import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';
import {
  Card,
  Col,
  Collapse,
  Divider,
  Row,
  Table,
  Select,
  Tooltip,
} from 'antd';

const GradeComparison = () => {
  const data = [
    {
      className: '电气2201',
      type: '排名前10%人数.',
      value: 18,
    },
    {
      className: '电气2201',
      type: '排名前30%人数.',
      value: 28,
    },
    {
      className: '电气2202',
      type: '排名前10%人数.',
      value: 12,
    },
    {
      className: '电气2202',
      type: '排名前30%人数.',
      value: 22,
    },
    {
      className: '电气2203',
      type: '排名前10%人数.',
      value: 12,
    },
    {
      className: '电气2203',
      type: '排名前30%人数.',
      value: 23,
    },
    {
      className: '电气2204',
      type: '排名前10%人数.',
      value: 18,
    },
    {
      className: '电气2204',
      type: '排名前30%人数.',
      value: 28,
    },
    {
      className: '电气2205',
      type: '排名前10%人数.',
      value: 12,
    },
    {
      className: '电气2205',
      type: '排名前30%人数.',
      value: 23,
    },
    {
      className: '电气2206',
      type: '排名前10%人数.',
      value: 12,
    },
    {
      className: '电气2206',
      type: '排名前30%人数.',
      value: 13,
    },
    {
      className: '电气2207',
      type: '排名前10%人数.',
      value: 32,
    },
    {
      className: '电气2207',
      type: '排名前30%人数.',
      value: 23,
    },
    {
      className: '电气2208',
      type: '排名前10%人数.',
      value: 18,
    },
    {
      className: '电气2208',
      type: '排名前30%人数.',
      value: 13,
    },
  ];
  const config = {
    data,
    isStack: true,
    xField: 'className',
    yField: 'value',
    seriesField: 'type',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle', // 'top', 'bottom', 'middle'
      formatter: (item) => {
        let newValue = Math.round(item.value); // 进一步计算
        return `${newValue}%`; // 显示格式化后的数据
      },
    },
    interactions: [
      {
        type: 'active-region',
        enable: false,
      },
    ],
    connectedArea: {
      style: (oldStyle, element) => {
        return {
          fill: 'rgba(0,0,0,0.25)',
          stroke: oldStyle.fill,
          lineWidth: 0.5,
        };
      },
    },
  };

  return (
    <Card
      extra={
        <Select
          placeholder={'选择专业'}
          style={{ width: 200 }}
          //onChange={handleMajorChange}
          defaultValue={'电气工程与自动化'}
        >
          <Select.Option value="电气工程与自动化">
            电气工程与自动化
          </Select.Option>
          <Select.Option value="新能源科学与工程">
            新能源科学与工程
          </Select.Option>
        </Select>
      }
    >
      <Column {...config} />
    </Card>
  );
};

export default GradeComparison;
